{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>天算星座-卫星大数据平台</title>
    <style type="text/css">
		html{height:100%}
		body{height:100%;margin:0;padding:0}
		#map{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        .clickable {
            cursor: pointer; /* 当鼠标悬浮时，光标变成手指形状 */
        }
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=b07Txardz712vRTFjDaBbPEmzOynEzOR"></script>
    <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}" />
    <link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.css' %}">
    <link rel="stylesheet" href="{% static 'css/app.css' %}"/>
{#    <link rel="stylesheet" href="{% static 'css/table.css' %}"/>#}

	<script type="text/javascript" src="{% static 'js/app.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <script src="{% static 'js/index.js' %}"></script>
    <script src="{% static 'js/time.js' %}"></script>
	<script src="{% static 'sdk/sdk.js' %}"></script>

	<link rel="stylesheet" href="{% static 'sdk/sdk.css' %}" />
    <link rel="stylesheet" href="{% static 'sdk/helper.css' %}" />
    <link rel="stylesheet" href="{% static 'css/time.css' %}" />

</head>
<body>
	<div id="map"></div>
	<!--header-->
    <section class="time-warp" id="time-warp">
	   <div id="timeline"></div>
	 </section>

	<div data-v-d1db20f6="" data-v-258a4cb6="" class="logo-menu">
		<div data-v-d1db20f6="" class="logo-wrap clearfix">
			<div data-v-d1db20f6="" class="logo-img fl">
				<img data-v-d1db20f6="" src="" alt="">
			</div>
			<div data-v-d1db20f6="" class="logo-title fl">
				<span data-v-d1db20f6="">
						天算星座-卫星大数据平台
				</span>
			</div>
		</div>
		<div data-v-d1db20f6="" class="menu-dialog" style="display: none;">
			<i data-v-d1db20f6="" class="close-icon el-icon-close">
			</i>
			<div data-v-d1db20f6="" class="menu-img">
				<img data-v-d1db20f6="" src="" alt="">
			</div>
		</div>
	</div>
	<!--left-->
	<div data-v-37c16eed="" data-v-258a4cb6="" class="header-wrap headerGradient">
		<div data-v-37c16eed="" class="header">
			<div data-v-37c16eed="" class="fr header-content" style="width:100px;">
				<span data-v-37c16eed="" class="avartar">
					<i data-v-37c16eed="" class="icon iconfont icontouxiang">
					</i>
				</span>
			</div>
			<div data-v-37c16eed="" class="fr home-wrap">
				<div data-v-37c16eed="" class="to-index">
					<a href="https://www.bupt.edu.cn/" style="color: white;">
						北京邮电大学
					</a>
				</div>
			</div>
		</div>
	</div>
    <div data-v-258a4cb6="" id="result" class="zyb-lb" style="left: 15px;">
		<span data-v-258a4cb6="" class="lb-gb icon iconfont iconshanchu" id='shanchu'>
		</span>
		<ul data-v-258a4cb6="" role="menubar" class="el-menu-demo el-menu--horizontal el-menu">
			<li data-v-258a4cb6="" role="menuitem" tabindex="-1" class="el-menu-item is-active"
			popper-class="conditionmenu" style="color: rgb(36, 46, 66); border-bottom-color: rgb(36, 46, 66);">
				<div data-v-258a4cb6="" class="nav-item clearfix">
					<span data-v-258a4cb6="" class="fl">
						数据检索
					</span>
				</div>
			</li>
		</ul>
		<!--result-->
		<div data-v-258a4cb6="" class="tabbox" id="img" style="background-color:white; height:270px">
			<div id="table2"></div>
		</div>
	</div>
{#    <main class="table">#}
{#        <section class="shell">#}
{#            <table>#}
{#                <thead>#}
{#                    <tr>#}
{#                        <th style="text-align:center; font-size:0.9rem"> Id </th>#}
{#                        <th style="text-align:center; font-size:0.9rem"> date </th>#}
{#                        <th style="text-align:center; font-size:0.9rem"> location </th>#}
{#                        <th style="text-align:center; font-size:0.9rem"> text </th>#}
{#                        <th style="text-align:center; font-size:0.9rem"> 操作 </th>#}
{#                    </tr>#}
{#                </thead>#}
{#                <tbody>#}
{#                    {% for obj in content %}#}
{#                    <tr>#}
{#                        <td style="text-align: center"> {{ obj.0 }} </td>#}
{#                        <td style="text-align: center"> {{ obj.1 }} </td>#}
{#                        <td style="text-align: center"> {{ obj.2 }} </td>#}
{#                        <td style="text-align: center"> {{ obj.3 }} </td>#}
{#                        <td style="text-align: center">#}
{#                            <p class="button" style="background-color:#5ba8ff;">查看</p>#}
{#                        </td>#}
{#                    </tr>#}
{#                    {% endfor %}#}
{#                </tbody>#}
{#            </table>#}
{#        </section>#}
{#    </main>#}
	<!--search result-->
</div>
</body>

<script>

    var map = new BMapGL.Map('map'); // 创建Map实例
	map.centerAndZoom(new BMapGL.Point(106, 36), 1); // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
	map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式
	//map.setMapType(BMAP_SATELLITE_MAP);      // 设置地图类型为普通卫星地图模式
	map.disableKeyboard(); // 禁用键盘操作

</script>

<script>
    const bbox = {{ bbox|safe }};
    const boundary = {{ boundary|safe }};
    const center = [(bbox[0][0]+bbox[2][0])/2, (bbox[1][0]+bbox[3][0])/2];
    let mPoint = new BMapGL.Point(center[0], center[1])
    let marker = new BMapGL.Marker(mPoint);
    let mapmask;
    let border;
    for (let i = 0; i < boundary.length; i++) {
        let path = [];
        let point;
        for (let j = 0; j < boundary[i].length; j++) {
            point = new BMapGL.Point(parseFloat(boundary[i][j][0]), parseFloat(boundary[i][j][1]));
            path.push(point);
        }
        mapmask = new BMapGL.MapMask(path, {
            isBuildingMask: true,
            isPoiMask: true,
            isMapMask: true,
            showRegion: 'inside',
            topFillColor: '#5679ea',
            topFillOpacity: 0.5,
            sideFillColor: '#5679ea',
            sideFillOpacity: 0.9
        });
        {#console.log(mapmask);#}
        map.addOverlay(mapmask);
        border = new BMapGL.Polyline(path, {
            strokeColor: '#4ca7a2',
            strokeWeight: 3,
            strokeOpacity: 1
        });
        map.addOverlay(border);
    }
    map.addOverlay(marker);
    map.enableScrollWheelZoom();
    map.centerAndZoom(mPoint, 12);                          //后续还需调整地图级别
</script>

<script>
    var times = {{ date|safe }};
    $(document).ready(function() {
    var html = "";
    var timecolos = [
		"#2c3e50", "#e74c3c",
		"#7b3","#20638f",
		"#122c91","#2a6fdb",
		"#48d6d2","#0d6534",
		"#915612","#fb0066"
	];


	let array = [];
	times.map((info)=>{
		array.push(times.splice(array.length,array.length+10));
	})

	array.map((items)=>{
		for (var i = 0; i < items.length; i++) {
          html = html + `<div class ="dot border" data-time="${items[i]}" style="background-color:#2a6fdb" >
        				<span data-time="${items[i]}"> </span>
						<date data-time="${items[i]}">${items[i]}</date>
					  </div>`;
	    }
	})
		$('#timeline').append(html);
		// $("#time-show-bt").on("click",function(){
		// 	if($("#time-warp").hasClass("timeshow")){
		// 		$("#time-warp").removeClass("timeshow");
		// 		$("#time-warp").addClass("timehide");
		// 		$("#time-show-bt").text("开");
		// 	}else{
				$("#time-warp").removeClass("timehide");
				$("#time-warp").addClass("timeshow");
				// $("#time-show-bt").text("关");
		// 	}
		// })
	$("#timeline").on("click",function (e){
	   	let time =e.target.getAttribute("data-time");

	})

	});
</script>


<script>
    const event_id = {{ event_id|safe }};
    const date = {{ date|safe }};
    const location1 = {{ address|safe }};
    const text = {{ information|safe }};
    const data = []
    for (let i = 0; i < event_id.length; i++) {
        const obj = {
            event_id: event_id[i],
            date: date[i],
            location1: location1[i],
            text: text[i]
        };
        data.push(obj);
    }
    let amis = amisRequire('amis/embed');
                let amisJSON = {
                    "type": "page",
                    "body": {
                        "type": "service",
                        "data": {
                            "page": 1,
                            "perPage": 5,
                            "items": data
                        },
                        "body": [
                            {
                                "type": "page",
                                "inputName": "page",
                                "outputName": "page",
                                "perPage": 5,
                                "position": "bottom",
                                "body": [
                                    {
                                        "type": "table2",
                                        "syncLocation": false,
                                        "value": data,
                                        "scroll": {
                                            "y": 200
                                        },
                                        "columns": [
                                            {
                                                "name": "event_id",
                                                "label": "ID",
                                                "width": 50,
                                                "align": "center",
                                                "type": "text"
                                            },
                                            {
                                                "name": "date",
                                                "label": "时间",
                                                "width": 80,
                                                "align": "center",
                                                "type": "text"
                                            },
                                            {
                                                "name": "location1",
                                                "label": "地址",
                                                "align": "center",
                                                "width": 60,
                                                "type": "text"
                                            },
                                            {
                                                "name": "text",
                                                "label": "描述",
                                                "align": "center",
                                                "type": "text"
                                            },
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                };
                let amisScoped = amis.embed('#table2', amisJSON);
</script>

<script>
    const box = document.getElementsByClassName('cxd-Table-head-cell-wrapper');
    for (let i=0; i<box.length; i++) {
        box[i].style.display = 'block';
        box[i].style.alignItems = 'center';
        box[i].style.textAlign = 'center';
    }
</script>
<style>/*去除百度地图版权*/

.anchorBL{

display:none;

}

</style>

</html>